<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字" class="keyword">
              <el-input v-model="formInline.keyword" ></el-input>
            </el-form-item>
            <el-form-item label="状态" class="state">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="hDel">清除</el-button>
              <el-button type="primary" @click="hSearch">搜索</el-button>
            </el-form-item>
            <el-form-item class="add">
              <el-button type="success" icon="el-icon-edit" @click="hAdd">新增技巧</el-button>
            </el-form-item>
          </el-form>

        <div class="page-tools">
          <div class="left">
            <div class="tips">
              <i class="el-icon-info" />
              <span>数据一共{{counts}}条</span>
            </div>
         </div>
        </div>

      <!-- 表格 -->
        <el-table
            :data="list"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="序号"
              width="80"
              type=index
              :index="tabelIndex">
            </el-table-column>
            <el-table-column
              prop="title"
              label="文章标题"
              width="430">
            </el-table-column>
            <el-table-column
              prop="visits"
              label="阅读数"
              width="180">
            </el-table-column>
            <el-table-column
              prop="username"
              label="录入人"
              width="200">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="录入时间"
              width="180">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="110">
                <template slot-scope="scope">
                    {{ currentState(scope.row.state)}}
                </template>
            </el-table-column>
            <el-table-column
              label="操作">
               <!-- eslint-disable-next-line vue/no-unused-vars -->
              <template slot-scope="scope">
                <el-button type="text" size="small">预览</el-button>
                <el-button type="text" size="small">禁用</el-button>
                <el-button type="text" size="small">修改</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
        </el-table>

      <!-- 分页 -->
        <div class="block">
          <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(pageparams.page)"
            :page-sizes="[2, 5, 10, 15]"
            layout="sizes, prev, pager, next, jumper"
            :total="Number(this.counts)"
            :page-size="Number(pageparams.pagesize)">
          </el-pagination>
        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import { list } from '../../api/hmmm/articles'
import { parseTime } from '../../utils'
import status from '../../api/hmmm/constants'

export default {
  data () {
    return {
      formInline: {
        keyword: '',
        state: ''
      },
      // 文章列表
      list: [],
      counts: '0', // 总条数
      pageparams: {
        page: '1', // 当前页码
        pagesize: '5', // 每页几条
        pages: '2'
      }

    }
  },
  created () {
    this.loadArticleList()
  },
  methods: {
    async loadArticleList () {
      try {
        const res = await list(this.pageparams)
        console.log('loadArticleList', res)
        // 保存数据
        const { items, counts, page, pagesize, pages } = res.data
        this.list = items
        this.counts = counts
        this.page = page
        this.pagesize = pagesize
        this.pages = pages
        console.log(parseTime(res.data.items.createTime))
      } catch (err) {
        console.log(err)
      }
    },
    currentState (num) {
      // console.log(num)
      const item = status.find(it => it.value === num)
      if (item) {
        return item.label
      }
    },
    hDel () {
      console.log('hDel!')
    },
    hSearch () {
      console.log('hSearch!')
    },
    hAdd () {
      console.log('hAdd!')
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageparams.pagesize = val
      this.loadArticleList()
    },
    // 用户点击了页码
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageparams.page = val
      this.loadArticleList()
    },
    tabelIndex (index) {
      return (this.pageparams.page - 1) * this.pageparams.pagesize + index + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.page-tools {
  width: 100%;
  margin-bottom: 20px;
  .tips {
    line-height: 34px;
    padding: 0px 15px;
    border-radius: 5px;
    background: #f4f4f5;
    color: #96969b;
    i {
      margin-right: 10px;
      color: #909399;
    }
  }
}
.demo-form-inline {
  .keyword {
    margin-left: 25px;
  }
  .state {
    margin-left: 45px;
  }
  .add {
    float: right;
  }
}
.block {
  margin: 20px 0;
  float: right;
}

</style>
